<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日信息页面</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="#">每日信息页</a></span>
                </transition>
            </div>

            <!-- 菜单 -->
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"
                     default-active="home"
                     class="el-menu-vertical-demo" :collapse="isCollapse">

                <a href="#">
                    <el-menu-item index="1">
                        <i class="el-icon-document"></i>
                        <span slot="title">每日信息</span>
                    </el-menu-item>
                </a>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.account}}
                        </span>
                        <el-dropdown>
                            <img src="/images/xs.png"
                                 style="width: 65px; height: 65px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">

                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出账号</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>

            <!-- 主体区域 -->
            <el-main>
                <div style="color: black; font-size: 20px; margin: 10px 0">信息列表</div>
                <div style="height: 1px; background-color: white"></div>

                <!-- 搜索框 -->
<!--                <el-input v-model="search" style="width: 20%;margin: 10px 0px" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"-->
<!--                          @keyup.enter.native="loadTableLike"></el-input>-->

                <el-button @click="add" type="primary" size="mini" style="margin: 10px 0px">上传今日信息</el-button>
                <el-button @click="oneself" type="primary" size="mini" style="margin: 10px 0px">只看自己</el-button>
                <el-button @click="loadTableLike" type="primary" size="mini" style="margin: 10px 0px">查看所有</el-button>
                <!-- <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button> -->
                <el-table
                        :data="tableData"
                        border
                        :cell-style="columnStyle"
                        style="width: 100%">
                    <el-table-column
                            :prop="item.prop"
                            :label="item.label"
                            v-for="item in props"
                    ></el-table-column>

                    <el-table-column
                            :formatter="formCreateTime"
                            prop="createTime"
                            label="创建时间"
                    ></el-table-column>
                    <el-table-column
                            :formatter="formUpdateTime"
                            prop="updateTime"
                            label="更新时间"
                    ></el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text">修改</el-button>
                            <!--                            <el-popconfirm-->
                            <!--                                    @onConfirm="del(scope.row.id)"-->
                            <!--                                    title="确定停用？">-->
                            <!--                                <el-button type="text" slot="reference">停用</el-button>-->
                            <!--                            </el-popconfirm>-->
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <div style="background-color: white">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[6, 12, 24, 48]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

                <!-- add -->
                <el-dialog title="信息上传" :visible.sync="dialogFormVisibleAdd" width="30%"
                           close-on-click-modal="false" close-on-press-escape="false" show-close="false">
                    <el-form label-width="100px" :model="entity">
                        <el-form-item label="健康状态" prop="physicalState">
                            <el-input type="text" v-model="entity.physicalState" placeholder="请输入您的今日健康状态" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="今日体温" prop="temperature">
                            <el-input type="text" v-model="entity.temperature" placeholder="请输入您的今日体温" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="上传位置" prop="address">
                            <el-input type="text" v-model="entity.address" placeholder="请输入您今日信息上传位置" size="mini"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 更新学生 -->
                <el-dialog title="更新信息" :visible.sync="dialogFormVisibleUpdate" width="30%"
                           close-on-click-modal="false" close-on-press-escape="false" show-close="false">
                    <el-form label-width="100px" :model="entity">
                        <el-form-item label="健康状态" prop="physicalState">
                            <el-input type="text" v-model="entity.physicalState" placeholder="请输入您的今日健康状态" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="今日体温" prop="temperature">
                            <el-input type="text" v-model="entity.temperature" placeholder="请输入您的今日体温" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="上传位置" prop="address">
                            <el-input type="text" v-model="entity.address" placeholder="请输入您今日信息上传位置" size="mini"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                        <el-button type="primary" @click="update">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>

        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>
<script src="../../js/base.js"></script>
<style>
</style>
<script>

    let urlBase = "/api/message";
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 12,
            total: 0,
            dialogFormVisibleAdd: false,
            dialogFormVisibleUpdate: false,
            entity: {},
            isCollapse: false,
            search: '',
            props: [
                {"label":"ID","prop":"id"},
                {"label":"姓名","prop":"username"},
                {"label":"身体状况","prop":"physicalState"},
                {"label":"今日体温","prop":"temperature"},
                {"label":"所在地址","prop":"address"}
            ]
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();
        },
        methods: {
            formCreateTime:function(row, column, cellValue, index){
                var dt = new Date(row.createTime);
                var year = dt.getFullYear();//年
                var month = dt.getMonth() + 1;//月；从0开始所以要加1
                var date = dt.getDate();//日
                var hour = dt.getHours();
                var minutes = dt.getMinutes();
                var second = dt.getSeconds();

                month = month >= 10 ? month : "0" + month;
                date = date >= 10 ? date : "0" + date;
                hour = hour >= 10 ? hour : "0" + hour;
                minutes = minutes >= 10 ? minutes : "0" + minutes;
                second = second >= 10 ? second : "0" + second;
                return year + "-" + month + "-" + date + " " + hour + ":" + minutes;
            },
            formUpdateTime:function(row, column, cellValue, index){
                var dt = new Date(row.updateTime);
                var year = dt.getFullYear();//年
                var month = dt.getMonth() + 1;//月；从0开始所以要加1
                var date = dt.getDate();//日
                var hour = dt.getHours();
                var minutes = dt.getMinutes();
                var second = dt.getSeconds();

                month = month >= 10 ? month : "0" + month;
                date = date >= 10 ? date : "0" + date;
                hour = hour >= 10 ? hour : "0" + hour;
                minutes = minutes >= 10 ? minutes : "0" + minutes;
                second = second >= 10 ? second : "0" + second;
                return year + "-" + month + "-" + date + " " + hour + ":" + minutes;
            },
            columnStyle({ row, column, rowIndex, columnIndex }) {
                if(row.temperature >= 37.3){
                    if (columnIndex == 1 || columnIndex == 3) {
                        //字体颜色
                        return "color:red; cursor: pointer";
                    }
                    return "";
                }
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/front/login.html";
            },
            loadTable() {
                $.post(urlBase + "/list?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data;
                    this.total = res.total;
                })
            },
            loadTableLike() {
                $.post(urlBase + "/listLike?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data;
                    this.total = res.total;
                })
            },
            oneself() {
                $.post(urlBase + "/listOneself?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data;
                    this.total = res.total;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.dialogFormVisibleAdd = true;
            },
            save() {
                let type = this.entity.id ? "PUT" : "POST";
                $.ajax({
                    url: urlBase+"/add",
                    type: type,
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisibleAdd = false;
                })
            },
            edit(obj) {
                this.entity = obj;
                this.dialogFormVisibleUpdate = true;
            },
            update() {
                $.ajax({
                    url: urlBase + "/update",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            message: "更新成功",
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                        this.loadTable();
                    }
                    this.dialogFormVisibleUpdate = false;
                })
            },
            del(id) {
                $.ajax({
                    url: urlBase+"/delete?id=" + id,
                    type: "delete"
                }).then(res => {
                    console.log(res);
                    if (res.code === 0) {
                        this.$message({
                            message: "账号已停用",
                            type: "success"
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
